.left-panel{
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column; /* 在设置flex的基础上设置column，会让该区域子项的横竖反转，如原来的垂直居中样式变成水平居中 */
    align-items: center; /* 原来是垂直居中，现被调整为水平居中 */
}

/*头像部分*/
.avatar{
    display: flex;
    flex-direction: column; /* 在设置flex的基础上设置column，会让该区域子项的横竖反转，如原来的垂直居中样式变成水平居中 */
    align-items: center; /* 原来是垂直居中，现被调整为水平居中 */
}
.avatar-img{
}

/*导航列表部分*/
.sub-navbar{
}
.sub-navbar-link {
    text-decoration: none;  /* 去除a标签中文字的下划线 */
    display: block; /* 将链接显示为块级元素,以便设置长和高 */
    color: #282c34;     /* a标签内字体颜色 */
}
.sub-navbar-link:hover {
    background-color: #3d96c0;  /*背景颜色*/
}
.sub-navbar-icon {
    vertical-align: middle;    /* 使Logo图标居中 */
}
.sub-navbar-title {
}

/* 底部按钮 */
.left-panel-bottom{
    background-color: #f3f1f0;
    display: flex;
    align-items: center; /* 垂直居中 */
}

.left-panel-bottom-link{
    display: flex;
    justify-content: center;    /* 子项水平居中 */
    align-items: stretch;  /* 子项填充整个父项 */
    cursor: pointer; /* 鼠标悬停时变为手形 */
}
.left-panel-bottom-link:hover{
    opacity: 0.8; /* 鼠标悬停时降低图片透明度 */
    background-color: white;
}
